/* global document */
import React from 'react'
import PropTypes from 'prop-types'
import {config} from 'utils'
import {getToken} from 'utils/authority'
import {Button, Col, Icon, Form, Upload, Input, InputNumber, DatePicker, message, Row, Select} from 'antd'

const {Option} = Select
const {Search} = Input
const FormItem = Form.Item

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}

const Filter = ({
                  expandForm,
                  onAdd,
                  onFilterChange,
                  filter,
                  toggleForm,
                  handleReset,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                }) => {
  const handleFields = (fields) => {
    // const {createTime} = fields
    // if (createTime.length) {
    //   fields.createTime = [createTime[0].format('YYYY-MM-DD'), createTime[1].format('YYYY-MM-DD')]
    // }
    return fields
  }

  const valid = fields => {
    const {type, keyword} = fields

    if (!type && keyword) {
      message.warn("请选择查询类型")
      return false
    }

    return true
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    if (!valid(fields)) {
      return
    }
    onFilterChange(fields)
  }


  const handleFormReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }
  const {type, keyword} = filter


  const simpleFields = [
    (
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="订单编号">
          {getFieldDecorator('sn', {})(<Input placeholder="请输入"/>)}
        </FormItem>
      </Col>
    ),
    (
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="下单员工">
          {getFieldDecorator('belongEmpId', {})(<Input placeholder="请输入"/>)}
        </FormItem>
      </Col>
    ),
    (
      <Col md={6} sm={24}>
        <FormItem {...formItemLayout} label="归属微信号">
          {getFieldDecorator('wxId', {})(<Input placeholder="请输入"/>)}
        </FormItem>
      </Col>
    ),
  ]

  const renderSimpleForm = () => (
    <Form layout="horizontal">
      <Row gutter={24}>
        {simpleFields}
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem label={''}>
            <Button className="margin-right" type="primary" htmlType="submit">查询</Button>
            <Button onClick={handleFormReset}>重置</Button>
            <a style={{marginLeft: 8}} onClick={toggleForm}>展开 <Icon type="down"/></a>
          </FormItem>
        </Col>
      </Row>
    </Form>
  )

  const renderAdvancedForm = () => (
    <Form layout="horizontal">
      <Row gutter={24}>
        {simpleFields}
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="客户微信号">
            {getFieldDecorator('customerWxId', {})(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="发货仓库">
            {getFieldDecorator('depotId', {})(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="快递公司">
            {getFieldDecorator('expressTypeId')(
              <Select allowClear placeholder="请选择" style={{width: 200}}>
                <Option value={1}>{'顺丰'}</Option>
                <Option value={2}>{'韵达'}</Option>
                <Option value={3}>{'EMS'}</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="收货人">
            {getFieldDecorator('receiver', {})(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="收货人电话">
            {getFieldDecorator('mobile', {})(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="公司部门">
            {getFieldDecorator('belongDeptId')(
              <Select allowClear placeholder="请选择" style={{width: 200}}>
                <Option value={1}>{'采购部'}</Option>
                <Option value={2}>{'销售部'}</Option>
                <Option value={3}>{'公关部'}</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 9}} md={4} sm={24}>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 18}} label="下单日期">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('beginTime')(<DatePicker style={{width: '100%'}} placeholder="开始时间"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('endTime')(<DatePicker style={{width: '100%'}} placeholder="结束时间"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 9}} md={4} sm={24}>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 18}} label="发货时间">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('sendTimeBeginDate')(<DatePicker style={{width: '100%'}} placeholder="开始时间"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('sendTimeEndDate')(<DatePicker style={{width: '100%'}} placeholder="结束时间"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <div style={{marginLeft: '10%'}}>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button onClick={handleFormReset}>重置</Button>
            <a style={{marginLeft: 8}} onClick={toggleForm}>收起 <Icon type="up"/></a>
          </div>
        </Col>
      </Row>
    </Form>
  )


  const renderForm = () => {
    return expandForm ? renderAdvancedForm() : renderSimpleForm()
  }

  return (
    <div>
      <Row gutter={24}>
        {renderForm()}
      </Row>
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
